﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Shop_Selector.aspx.cs" Inherits="JKF.Web.Shop.Shop_Selector" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <%= RegScript("~/js/jquery.1.5.js")%>
    <%= RegScript("~/js/jquery.nhis.js")%>
    <%= RegScript("~/js/jquery.rchis.js")%>
    <%= RegScript("~/js/jquery-ui-custom.min.js")%>
    <%= RegScript("~/js/jquery.json.js")%>
    <%= RegScript("~/js/css.js")%>
    <%= RegScript("~/js/DatePicker/WdatePicker.js")%>
    <%= RegScript("~/js/Common.js")%>
    <%= RegScript("~/js/Jquery.commonGrid.js")%>
    <%= RegStyle("~/App_Themes/Theme2/Include.css")%>
    <script type="text/javascript">
        var appPath = "<%=AppPath %>";
        var tmpl = new DTemplate();
        var areaHandler = appPath + '/do/Dic/Dic_Area.do';
        var handler = appPath + "/do/SMS/SmsModule.do";
        var shopHandler = appPath + "/do/Shop/Shop.do";
        var optMobile = "【${SHOP_CODE}】【${SHOP_NAME}】【${LINKMAN}】";
        var dtReg = /^\d{4}(\/|-)([1][0-2]|[1-9]|0[1-9])(\/|-)([1-2][0-9]|3[0-1]|[1-9]|0[1-9])( (0?[0-9]|1[0-9]|2[0-4])(:([0-5][0-9])){1,2})?$/;

        $(function () {
            BindEvent();
        });

        function BindEvent() {
            $("#province").change(function () {
                $("#city").val("");
                $("#AREA_CODE").val("");
                $("#city").attr("disabled", "disabled");
                $("#AREA_CODE").attr("disabled", "disabled");
                if ($(this).val().length > 0) {
                    $.post(areaHandler, { ActionName: "GetAreaJson", code: $(this).val() }, function (obj) {
                        if (obj.Success) {
                            $("#city").empty();
                            $("#city").html("<option value=''>请选择</option>" + tmpl("<option value=\"${value}\">${text}</option>", obj.Data, true)).removeAttr("disabled");
                            if ($("#city").attr("pvl")) {
                                $("#city").val($("#city").attr("pvl")).change();
                            }
                        }
                    }, "json");
                }
            });
            $("#city").change(function () {
                $("#AREA_CODE").val("");
                $("#AREA_CODE").attr("disabled", "disabled");
                if ($(this).val().length > 0) {
                    $.post(areaHandler, { ActionName: "GetAreaJson", code: $(this).val() }, function (obj) {
                        if (obj.Success) {
                            $("#AREA_CODE").empty();
                            $("#AREA_CODE").html("<option value=''>请选择</option>" + tmpl("<option value=\"${value}\">${text}</option>", obj.Data, true)).removeAttr("disabled");
                            if ($("#AREA_CODE").attr("pvl")) $("#AREA_CODE").val($("#AREA_CODE").attr("pvl"));
                        }
                    }, "json");
                }
            });

            $("#sourceList").dblclick(function () { moveTo($("#sourceList"), $("#targetList")); });
            $("#targetList").dblclick(function () { moveTo($("#targetList"), $("#sourceList")); });
            $("#btnAdd").click(function () { moveTo($("#sourceList"), $("#targetList")); });
            $("#btnAddAll").click(function () { moveAllTo($("#sourceList"), $("#targetList")); });
            $("#btnRemove").click(function () { moveTo($("#targetList"), $("#sourceList")); });
            $("#btnRemoveAll").click(function () { moveAllTo($("#targetList"), $("#sourceList")); });

            $("#btnSearch").click(SearchShop);
            $("#btnConfirm").click(function () {
                var shops = [];
                $("#targetList").find("option").each(function () {
                    var vl = $.trim($(this).val());
                    shops.push({ SHOP_CODE: vl, SHOP_NAME: $.FxNull($.trim($(this).attr("shopName"))) });
                });
                top.popRetuInfo(shops);
                top.tipsWindown.close();
            });
        }
        function SearchShop() {
            var areaCode = $.trim($.FxNull($("#AREA_CODE").val(), ""));
            if (areaCode == "") areaCode = $.trim($.FxNull($("#city").val(), ""));
            if (areaCode == "") areaCode = $.trim($.FxNull($("#province").val(), ""));
            $.post(shopHandler, {
                ActionName: "SearchOwnShops",
                shopName: $.trim($("#SHOP_NAME").val()),
                linkMan: $.trim($("#LINKMAN").val()),
                areaCode: areaCode
            },
            function (rslt) {
                $("#sourceList").empty();
                if (rslt.Success) {
                    var optvl;
                    $(rslt.Data).each(function () {
                        optvl = tmpl(optMobile, this, true);
                        $("#sourceList").append($("<option></option>").text(optvl).attr("value", this.SHOP_CODE).attr("shopName", this.SHOP_NAME));
                    });
                    updateSelectCount();
                    return;
                }
                alert(rslt.Message);
            }, "json");
        }

        function moveAllTo(src, tgt) {
            var options = src.find("option");
            $(options).each(function () {
                if (tgt.find("option[value='" + $(this).attr("value") + "']").size() == 0) tgt.append(this);
                else $(this).remove();
            });
            updateSelectCount();
        }

        function updateSelectCount() {
            $("#sourceNum").text($("#sourceList").find("option").size());
            $("#targetNum").text($("#targetList").find("option").size());
        }

        function moveTo(src, tgt) {
            var sel = src.val();
            $(sel).each(function () {
                if (tgt.find("option[value='" + this + "']").size() == 0) tgt.append(src.find("option[value='" + this + "']"));
                else src.find("option[value='" + this + "']").remove();
            });
            updateSelectCount();
        }

    </script>
</head>
<body style="height: auto;">
    <form id="form1" runat="server">
        <div class="pop_body" style="margin: 16px;">
            <p class="mb8 f14"><strong>第一步：设定搜索条件</strong></p>
            <div class="common_search">
                <div class="l_h45">
                    <span class="mr30 mb20">店铺名称：<input id="SHOP_NAME" type="text" class="common_search_input w150" /></span>
                    <span class="mr30 mb20">联系方式：<input id="LINKMAN" type="text" class="common_search_input w150" /></span>
                </div>
                <div class="l_h45">
                    <span class="mr30">所属地区：
                        <select id="province" class="common_search_select w150">
                            <option value="">请选择</option>
                            <%=Province %>
                        </select>
                        省
                        <select id="city" class="common_search_select w150" disabled="disabled">
                            <option value="">请选择</option>
                        </select>
                        市
                        <select id="AREA_CODE" class="common_search_select w150" disabled="disabled">
                            <option value="">请选择</option>
                        </select>
                        区
                    </span>
                    <input id="btnSearch" type="button" class="common_btn_search2" value="" />
                </div>
            </div>

            <div class="mb25"></div>
            <p class="mb8 f14"><strong>第二步：显示符合条件店铺</strong></p>
            <div style="width: 690px">
                <div style="width: 287px; float: left;" class="border_blue">
                    <h4 class="title">待选店铺<span class="fred" id="sourceNum">0</span>&nbsp;&nbsp;</h4>
                    <div class="user_list">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="common_table">
                            <thead>
                                <tr>
                                    <th width="16%" align="left">编码</th>
                                    <th width="17%" align="left">名称</th>
                                    <th width="52%" align="left">联系人</th>
                                </tr>
                            </thead>
                        </table>
                        <select id="sourceList" style="width: 100%; height: 200px; border: none;" size="4" multiple="multiple">
                        </select>
                    </div>
                </div>
                <div style="width: 110px; float: left;" class="pop_btn">
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p>
                        <input id="btnAdd" type="button" class="common_btn_w69" value="添加 >" />
                    </p>
                    <p>&nbsp; </p>
                    <p>
                        <input id="btnRemove" type="button" class="common_btn_w69" value="< 删除" />
                    </p>
                    <p>&nbsp;</p>
                    <p>
                        <input id="btnAddAll" type="button" class="common_btn_w69" value="全选添加" />
                    </p>
                    <p>&nbsp;</p>
                    <p>
                        <input id="btnRemoveAll" type="button" class="common_btn_w69" value="全选删除" />
                    </p>
                </div>
                <div style="width: 287px; float: left;" class="border_blue">
                    <h4 class="title">已选店铺<span class="fred" id="targetNum">0</span></h4>
                    <div class="user_list">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="common_table">
                            <thead>
                                <tr>
                                    <th width="16%" align="left">编码</th>
                                    <th width="17%" align="left">名称</th>
                                    <th width="52%" align="left">联系人</th>
                                </tr>
                            </thead>
                        </table>
                        <select id="targetList" style="width: 100%; height: 200px; border: none;" size="4" multiple="multiple">
                        </select>
                    </div>
                </div>
                <br clear="all" />
            </div>
        </div>
        <div class="pop_btn">
            <input id="btnConfirm" type="button" class="common_btn_confirm" value=" " />
        </div>
    </form>
</body>
</html>
